import styled from "styled-components";

export const LaneMonitoringBox = styled.div`
    background-color: #F2F4F7;
    width: 100vw;
    height: 100vh;
    
    .header_box{
        height: 9em;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .header_left{
            margin-left: 2.7em;
            display: flex;
            align-items: center;
            .log_image{
                /* width: 89.8em;
                height: 5.8em;
                background-size: 100% 100%;
                margin-right: 11.4em;
                margin-right: 34.4em; */
                margin-right: 11.4em;
                span{
                    // font-family: 'FZLanTingHeiS-H-GB';
                font-weight: 600;
                font-size: 4em;
                color: #1763CD;
                }

            }
            /* .handler_left_gun{
                width: 1.6em;
                height: 30.3em;
                background: #F0F3F7;
                margin-right: 13.6em;
                margin-left: 19.2em;
            } */
            .chedao{
                /* width: 90.4em; */
                /* height: 15.5em; */
                // font-family: 'FZLanTingHeiS-H-GB';
                font-weight: 600;
                font-size: 3.6em;
                color: #212121;
                
            }
        }
        .header_right{
            margin-right: 6.6em;
            display: flex;
            align-items: center;
            .riqi{
                text-align: right;
                margin-right: 2.1em;
                .riqi_top{
                    font-family: PingFang SC;
                    font-weight: bold;
                  
                    color: #333333;
                    span{
                        font-size: 1.6em;
                    }
                }
                .riqi_bottom{
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #333333;
                    margin-top: 1.56em;
                    span{
                    font-size: 1.6em;
                       
                    }
                }
            }
            .xiaoshi{
                font-family: PingFang SC;
                font-weight: bold;
                font-size: 6em;
                color: #333333;
            }
        }
    }
    .text_box{
        margin-top: 19.8em;
        padding: 0 35.7em;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 18.7em;
        .text_left{
            width: 451.6em;
            height: 204em;
            background: #FFFFFF;
            box-shadow: 0px .6em .8em .2em #E3E7EE;
            border-radius: 4em;
            padding: 22.9em 24em 0;
            box-sizing: border-box;
            .text_left_chepaihao{
                /* width: 400.4em; */
                height: 44em;
                background: #F2F4F7;
                border-radius: 4em;
                display: flex;
                align-items: center;
                padding: 0 13.2em;
                span{
                    // font-family: FZLanTingHeiS-H-GB;
                    font-weight: 600;
                    font-size: 25em;
                    color: #333333;
                }
            }
            .text_left_value{
                /* width: 400.4em; */
                height: 100.1em;
                background: #F2F4F7;
                border-radius: 4em;
                margin-top: 12em;
                display: flex;
                align-items: center;
                .text_left_value_gun {
                    width: 3em;
                    height: 58.5em;
                    background: #E9ECF0;
                }
                .text_left_value_item{
                    flex: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    flex-direction: column;
                    .text_left_value_item_title{
                        margin-bottom: 14.8em;
                        span{
                            // font-family: FZLanTingHeiS-H-GB;
                            font-weight: 600;
                            font-size: 19.2em;
                            color: #333333;
                        }
                    }
                    .text_left_value_item_text{
                        span{
                            // font-family: FZLanTingHeiS-H-GB;
                            font-weight: 600;
                            font-size: 25em;
                            color: #333333;
                        }                        

                    }
                }
            }
        }

    }

`

export const InfoModuleBox = styled.div`
        width: 62.8em;
        height: 32em;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.9em;
        span{
            // font-family: 'FZLanTingHeiS-H-GB';
            font-weight: 600;
            font-size: 11em;
            color: #F20C0C;
        }
`

export const SuccessModuleBox = styled.div`
            width: 62.8em;
        height: 22.3em;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.9em;
        span{
            // font-family: 'FZLanTingHeiS-H-GB';
            font-weight: 600;
            font-size: 11em;
            color: #1AAF4D;
        }
  
`
export const ErrorModuleBox = styled.div`
        
        width: 62.8em;
        height: 22.3em;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1.9em;
        span{
            // font-family: 'FZLanTingHeiS-H-GB';
            font-weight: 600;
            font-size: 11em;
            color: #F20C0C;
        }
  
`

export const NeirongBox = styled.div`
    display: flex;
    padding: 0 2em;
    justify-content: space-between;
    margin-top: 2.6em;
    .shipin_box{
        width: 122em;
        height: 75em;
        background: #000000;
        position: relative;
        #ZCvideo{
            width: 122em;
            height: 75em;
        }
    }
    .shuju_box{
        width: 62.8em;
        .chepaihao{
            height: 11.2em;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #FFFFFF;
            span{
                // font-family: 'FZLanTingHeiS-H-GB';
                font-weight: 600;
                font-size: 10em;
                color: #000000;
            }
        
        }
        .zhongliang_box_box{
            margin-top: 2.1em;
            .pizhong_box{
                height: 10em;
                background: #FFFFFF;
                display: flex;
                align-items: center;
                justify-content: space-around;
                
                span{
                    // font-family: 'FZLanTingHeiS-H-GB';
                    font-weight: 600;
                    font-size: 4.8em;
                    /* color: #FFFFFF; */
                }
                .pizhong_xiao{
                    font-size:6em;
                }
                .pizhong_da{
                    font-size:10em;
                    color: red;
                }
            }
        }
        .tishi_box{
            height: 8.5em;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 2.4em;
            background: #FFFFFF;
            span{
                // font-family: 'FZLanTingHeiS-H-GB';
                font-weight: 600;
                font-size: 5.8em;
                color: #000000;
            }
        }
    }
`